<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>
    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="工单号" v-model="orderID"></LInput>
      <LDateTimeSelect2 label="报修时间" style="margin-left: 16px" :value="orderTime" @time-event="getNewTime"></LDateTimeSelect2>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
    </section>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="待接单">
        <el-table :data="tableData1" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="报修单位" />
          <el-table-column label="报修人" />
          <el-table-column label="联系电话" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="执行中">
        <el-table :data="tableData2" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="接单时间" />
          <el-table-column label="维修单位" />
          <el-table-column label="执行人" />
          <el-table-column label="联系电话" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史工单">
        <el-table :data="tableData3" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column prop="address" label="工单状态" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="接单时间" />
          <el-table-column label="维修单位" />
          <el-table-column label="执行人" />
          <el-table-column label="联系电话" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="可协助">
        <el-table :data="tableData4" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="报修科室" />
          <el-table-column label="报修人" />
          <el-table-column label="联系电话" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="超时工单">
        <el-table :data="tableData5" style="width: 100%" border>
          <el-table-column prop="date" label="工单号" width="180" />
          <el-table-column prop="address" label="任务级别" />
          <el-table-column label="故障位置" />
          <el-table-column label="维修事项" />
          <el-table-column label="故障描述" />
          <el-table-column label="报修时间" />
          <el-table-column label="报修单位" />
          <el-table-column label="报修人" />
          <el-table-column label="联系电话" />
          <el-table-column label="超时" />
          <el-table-column label="操作">
            <template #default></template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Header from '@/components/Header'
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LDateTimeSelect2 from "../../../components/LDateTimeSelect2.vue";
import LButton from "../../../components/LButton.vue";

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LButton,
  },
  data() {
    return {
      title:"运维管理—工单派单管理",
      orderID: "",
      orderTime: [],
    };
  },
  mounted() {
   
  },
  beforeUnmount() {
  
  },
  methods: {
    //获取搜索栏“时间”
    getNewTime(m) {
      this.orderTime = m;
      // console.log("子组件传递的月份1", this.orderTime);
    },
    //清空筛选条件
    clearSelected() {
      console.log("点击清空按钮");
      this.orderID = "";
      this.orderTime = [];
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/deep/#tab-4 {
  color: rgba(255, 65, 54, 0.7);
}
</style>

